<template>
  <component
    :is="tag"
    :class="[radius, size]"
    :disabled="disabled"
    :style="style"
    @click="onClick"
  >
    <slot>{{ text }}</slot>
  </component>
</template>

<script>
import { addUnit } from "../utils/unit";

export default {
  name: "ss-button",
  props: {
    tag: {
      type: String,
      default: "button"
    },
    radius: {
      type: String,
      default: "nc"
    },
    size: {
      type: String,
      default: "md"
    },
    icon: String,
    iconPosition: {
      type: String,
      default: "left"
    },
    block: Boolean,
    plain: Boolean,
    text: String,
    color: String,
    background: String,
    disabled: Boolean,
    width: [String, Number],
    height: [String, Number],
    longPress: {
      type: Boolean,
      default: true
    },
    longPressTime: {
      type: Number,
      default: 1000
    }
  },
  data() {
    return {};
  },
  methods: {
    onClick(event) {
      this.$emit("click", event);
    }
  },
  computed: {
    style() {
      let { width, height, color, background } = this;
      width = addUnit(width);
      height = addUnit(height);
      let lineHeight = height;

      return {
        width,
        height,
        lineHeight,
        color,
        background
      };
    }
  }
};
</script>

<style scoped>
.bg-green {
  background-color: green;
}
.bg-cyan {
  background-color: cyan;
}

.mc {
  border-radius: 5px;
  border-width: 0;
}
.sc {
  border-radius: 20px;
  border-width: 0;
}
.nc {
  border-radius: 0;
  border-width: 0;
}

.sm {
  width: 60px;
  height: 30px;
}
.md {
  width: 100px;
  height: 40px;
}
.lg {
  width: 300px;
  height: 40px;
}
</style>
